<template>
<div>
  <a-table
      @change="businessCenterTablePaginationChange"
      :pagination="businessCenterTablePagination"
      :scroll="{x: 1920, y: '300px'}"
      :bordered="false"
      :rowKey="(record, index) => index"
      :dataSource="businessCenterTableData"
      :columns="businessCenterTableColumn"
  >
    <template slot="action" slot-scope="value, record">
      <div style="display: flex; justify-content: center">
        <!-- 我的申请 -->
        <template v-if="activeKey === 'formTask/my/applyTaskList'">
          <!-- <a-button type="link" v-for="item in ['查看', '撤回', '打印']" :key="item" @click="() => openWindow({...record, typeByc: item, btnKey: 'applyTaskList'})">
            {{item}}
          </a-button> -->
          <!-- 富阳柯桥需要撤回按钮 -->
          <a-button type="link" v-for="item in PageTitleBool ? ['查看', '撤回', '打印']: ['查看', '打印']" :key="item" @click="() => openWindow({...record, typeByc: item, btnKey: 'applyTaskList'})">
            {{item}}
          </a-button>
        </template>
        <!-- 我的待办 -->
        <template v-else-if="activeKey === 'formTask/my/todoTaskList'">
          <!-- 局长可打印 -->
          <a-button type="link" v-for="item in roleId === '363' ? ['办理', '打印'] : ['办理']" :key="item" @click="() => openWindow({...record, typeByc: item})">
              {{item}}
          </a-button>
        </template>
        <!-- 已办申请 -->
        <template v-else-if="activeKey === 'formTask/my/approveList'">
          <!-- <a-button type="link" v-for="item in PageTitle['查看', '撤回']" :key="item" @click="() => openWindow({...record, typeByc: item, btnKey: 'approveList'})">
            {{item}}
          </a-button> -->
          <!-- 富阳柯桥需要撤回按钮 -->
          <a-button type="link" v-for="item in PageTitleBool ? ['查看', '撤回']: ['查看']" :key="item" @click="() => openWindow({...record, typeByc: item, btnKey: 'approveList'})">
            {{item}}
          </a-button>
        </template>
      </div>
    </template>
    <template slot="rnAction" slot-scope="value, record, index">
      <div>
        {{index + 1}}
      </div>
    </template>
    <template slot="statusAction" slot-scope="value">
      <div v-if="value.toLowerCase() === 'running'" style="color: #6A9BEF">
        运行中
      </div>
      <div v-if="value.toLowerCase() === 'end'" style="color: #E6AC3C">
        结束
      </div>
      <div v-if="value.toLowerCase() === 'back'" style="color: #E6AC3C">
        退回
      </div>
      <div v-else>
        {{
          value.toLowerCase() === 'normal'
              ?
              '普通'
              :
              value.toLowerCase() === 'suspend'
                  ?
                  '挂起'
                  :
                  value.toLowerCase() === 'lock'
                      ?
                      '锁定'
                      :
                      value.toLowerCase() === 'designate'
                          ?
                          '指派'
                          :
                          value.toLowerCase() === 'turn'
                              ?
                              '转办'
                              :
                              value.toLowerCase() === 'adddoed'
                                  ?
                                  '加办结束'
                                  :
                                  value.toLowerCase() === 'agency'
                                      ?
                                      '代理'
                                      :
                                      ''
        }}
      </div>
    </template>
  </a-table>
  <BusinessWithdrawModel :withdrawObj="withdrawObj" :withdrawDialog="withdrawDialog" @withdrawDialogChange="withdrawDialogChange"/>
</div>
  
</template>

<script>
import {windowOpenBusiness} from "@/utils";
import {getLocalStorage} from "@/utils/localstore";
import {getCanNotReCall} from "@/api/approve/approve";
import BusinessWithdrawModel from "@/views/home/components/BusinessWithdrawModel";
import { message } from 'ant-design-vue';

export default {
  name: "BusinessTable",
  components: {
    BusinessWithdrawModel
  },
  props: {
    businessCenterTableColumn: {
      type: [Array],
      default: () => ([]),
    },
    businessCenterTableData: {
      type: [Array],
      default: () => ([]),
    },
    businessCenterTablePagination: {
      type: [Object],
      default: () => ({}),
    },
    businessCenterTablePaginationChange: {
      type: [Function],
      default: (pagination, filters) => ({pagination, filters}),
    },
    activeKey: {
      type: String,
      default: () => ''
    }
  },
  data () {
    return {
      roleId: '',
      withdrawObj: {},
      withdrawDialog: false,
      PageTitleBool: false
    }
  },
  created () {
    this.roleId = getLocalStorage('roleId')
  },
  mounted() {
    this.PageTitleBool = document.title === '富阳财政服务平台' || document.title ==='柯桥财政服务平台'
  },
  methods: {
    async openWindow(record) {
      const {typeByc} = record
      if (typeByc === '撤回') {
        const {btnKey, instId, nodeId, instStatus} = record
        if (btnKey === 'applyTaskList') {
          if (nodeId === 'UserTask1') {
            return message.error('该申请已回到起草节点,无法撤回')
          } else if (instStatus === 'end') {
            return message.error('流程已结束,无法撤回')
          } else {
            this.withdrawObj = record
            this.withdrawDialog = true
          }
        } else {
          //已办申请需要先判断是否可以撤回
          getCanNotReCall({
            instanceId: instId,
            nodeId,
            readonly: true
          }).then(res=> {
            const {success, data} = res
            if (success) {
              if (!data) {
                message.error('无法撤回')
              } else {
                this.withdrawDialog = true
                this.withdrawObj = record
              }
            } else {
              message.error('无法撤回')
            }
          })
        }
        // getCanNotReCall()
      } else {
        await windowOpenBusiness(record, this.activeKey === 'formTask/my/todoTaskList' ? 2 : 1)
      }
    },
    withdrawDialogChange (bool) {
      this.withdrawDialog = false
      if (bool) {
        this.$emit('businessTableDataChaneg')
      }
    }
  }
}
</script>

<style scoped>

</style>
